<template>
  <div class="quick-entry"
       :class="show?'show':''">
    <!-- 快捷入口 -->
    <div class="quick-entry-box"
         :class="show?'':'hide'">
      <i class="quick-entry-item icon-st"
         @click="handleClick('strj')" title="三通软件"></i>
      <i class="quick-entry-item icon-bz"
         @click="handleClick('yhsc')" title="用户手册"></i>
      <!-- <i class="quick-entry-item icon-app"
         @click="handleClick('app')"></i> -->
      <el-badge :value="msgCount">
        <i class="quick-entry-item icon-mg"
           @click="handleClick('msg')" title="告警信息"></i>
      </el-badge>
    </div>
    <!-- 显示隐藏按钮 -->
    <div class="quick-entry-btn"
         @click="quickEntryShow"
         title="快捷入口"
         :class="show?'active':''">
      <el-badge :value="msgCount">
        <div class="btn-icon-box">
          <i class="btn-icon"></i>
        </div>
      </el-badge>
      <span class="btn-text">快捷入口</span>
    </div>
    

  </div>
</template>

<script>
export default {
  name: 'QuickEntry',
  props: {
    msgCount: {
      default: 0
    }
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    quickEntryShow() {
      this.show = !this.show;
    },
    handleClick(type) {
      this.$emit('quick-entry-click', type);
    }
  },
}
</script>

<style lang="scss" scoped>
@mixin backgroundImage($name) {
  background: url("./assets/images/#{$name}") no-repeat;
  background-size: 100% 100%;
}
.quick-entry {
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 20px;
  bottom: -47px;
  // width: 62px; // 136px
  
  width: 154px;
  height: 42px;
  background-color: #97B9EB;
  border-radius: 8px;
  padding: 5px 15px;
  box-sizing: border-box;
  transition: all 0.16s;
  overflow: hidden;
  box-shadow: 0px 4px 6px 0px #98BAEC;
  &.show {
    width: 344px; // 256px
  }
  
  .quick-entry-btn {
    // flex: 0 0 62px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    
    .btn-icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      background: #fff;
      border: 1px solid #fff;
      border-radius: 14px;
      // margin-right: 10px;
      .btn-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        @include backgroundImage("icon-kj.png");
      }
    }
    .btn-text {
      font-size: 18px;
      margin-left: 20px;
      color: #fff;
      line-height: 32px;
    }
    &.active {
      .btn-icon-box {
        border-color: #3f8cff;
        .btn-icon {
          @include backgroundImage("icon-kj-h.png");
        }
      }
      .btn-text {
        color: #fff;
      }
    }
  }
  .quick-entry-box {
    display: flex;
    justify-content: space-between;
    width: 160px; // 180px
    height: 32px;
    padding-right: 3px;
    box-sizing: border-box;
    transition: all 0.16s;
    &.hide {
      width: 0;
      padding-right: 0;
    }

    .quick-entry-item {
      display: inline-block;
      width: 32px;
      height: 32px;
      cursor: pointer;
      border-radius: 14px;
      &.icon-st {
        @include backgroundImage("icon-st.png");
      }
      &.icon-bz {
        @include backgroundImage("icon-bz.png");
      }
      &.icon-app {
        @include backgroundImage("icon-app.png");
      }
      &.icon-mg {
        @include backgroundImage("icon-mg.png");
      }
    }
  }

  /* 重置el-badge */
  /deep/.el-badge__content.is-fixed {
    top: 5px;
    right: 12px;
  }
  /deep/.el-badge__content {
    line-height: 16px;
  }
}
</style>